<template>
  <el-autocomplete
    size="mini"
    :disabled="disabled"
    popper-class="my-autocomplete"
    v-model="val"
    :fetch-suggestions="uidSearch"
    placeholder="请输入内容"
    value-key="uid"
  >
    <template slot-scope="{ item }">
      <div v-html="item.name+'<br>'+item.uid" class="bx" @click="$emit('change',item);" />
    </template>
  </el-autocomplete>
</template>
<script>
// import name from "./name";
export default {
  // components: { name},
  props: {
    disabled: { default: false },
    value: { default: "" },
    list: { default: false }
  },
  watch: {
    value(a) {
      // console.log(a);
      this.val = a ? a : "";
    },
    list() {
      this.setTree();
    }
  },
  data() {
    return {
      val: "",
      tree: this.$gd.items
    };
  },
  // computed() {return{}},
  created() {
    this.setTree();
  },
  methods: {
    tst(a, b, c) {
      console.log(this.val, a, b, c);
    },
    uidSearch(queryString, cb) {
      // if (!queryString || queryString.length < 1) return;
      let restaurants = this.tree;
      let results = [];
      // if (queryString && queryString.length)
      results = queryString
        ? restaurants.filter(
            (function(res) {
              return ret => {
                return ret.uid.toLowerCase().indexOf(res.toLowerCase()) === 0;
              };
            })(queryString)
          )
        : restaurants;
      // 调用 callback 返回建议列表的数据
      // console.log(results);
      cb(results);
    },
    setTree() {
      if (this.list) this.tree = this.list;
      if (this.value) {
        this.val = this.value;
      }
    }
  }
};
</script>

<style scoped>
</style>
